<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Statistic, message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { getResourceOverview } from '#/api/resource-center';

const statistics = ref({
  total: 0,
  active: 0,
  transactions: 0,
  revenue: 0,
});

const router = useRouter();

const createResource = () => {
  message.info('跳转到资源创建页面');
  router.push('/resource-center/catalog');
};

const openMarket = () => {
  message.info('跳转到资源市场');
  router.push('/resource-center/market/listings');
};

const openCapabilityMarket = () => {
  message.info('跳转到能力市场');
  router.push('/resource-center/capability');
};

const openFactory = () => {
  message.info('跳转到SaaS工厂');
  router.push('/resource-center/saas-factory');
};

const openPricing = () => {
  message.info('跳转到定价配置');
  router.push('/resource-center/pricing');
};

const openRegistry = () => {
  message.info('跳转到资源注册');
  router.push('/resource-center/registry');
};

const openAnalytics = () => {
  message.info('跳转到数据分析');
  router.push('/resource-center/analytics');
};

const openScheduling = () => {
  message.info('跳转到排期管理');
  router.push('/resource-center/scheduling');
};

const openSettings = () => {
  message.info('跳转到系统设置');
  router.push('/resource-center/settings');
};

const openOrderManagement = () => {
  message.info('跳转到订单管理');
  router.push('/resource-center/market/orders');
};

const openTransactionHistory = () => {
  message.info('跳转到交易记录');
  router.push('/resource-center/market/transactions');
};

const openSellerCenter = () => {
  message.info('跳转到卖家中心');
  router.push('/resource-center/market/seller');
};

const loadStatistics = async () => {
  try {
    const result = await getResourceOverview();
    statistics.value = {
      total: result.totalResources || 0,
      active: result.totalResources || 0, // 使用totalResources作为活跃资源;
      transactions: result.totalOrders || 0, // 使用totalOrders作为交易数;
      revenue: result.totalRevenue || 0, // 使用totalRevenue
    };
  } catch (error) {
    console.error('Failed to load statistics:', error);
    // 使用默认数据
    statistics.value = {
      total: 156,
      active: 142,
      transactions: 89,
      revenue: 125000.5,
    };
  }
};

onMounted(() => {
  loadStatistics();
});
</script>

<template>
  <div class="resource-center">
    <div class="page-header">
      <h1>资源中心</h1>
      <p>一切皆资源，一切可交易</p>
    </div>

    <div class="content">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-card title="总资源数" class="stat-card">
            <Statistic :value="statistics.total" />
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="活跃资源" class="stat-card">
            <Statistic :value="statistics.active" />
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="本月交易" class="stat-card">
            <Statistic :value="statistics.transactions" />
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="总收入" class="stat-card">
            <Statistic :value="statistics.revenue" :precision="2" />
          </a-card>
        </a-col>
      </a-row>

      <a-card title="快速操作" style="margin-top: 16px">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-button type="primary" block @click="createResource">
              创建资源
            </a-button>
          </a-col>
          <a-col :span="6">
            <a-button block @click="openMarket"> 资源市场 </a-button>
          </a-col>
          <a-col :span="6">
            <a-button block @click="openFactory"> SaaS工厂 </a-button>
          </a-col>
          <a-col :span="6">
            <a-button block @click="openPricing"> 定价配置 </a-button>
          </a-col>
        </a-row>
        <a-row :gutter="16" style="margin-top: 16px">
          <a-col :span="6">
            <a-button block @click="openRegistry"> 资源注册 </a-button>
          </a-col>
          <a-col :span="6">
            <a-button block @click="openCapabilityMarket"> 能力市场 </a-button>
          </a-col>
          <a-col :span="6">
            <a-button block @click="openScheduling"> 排期管理 </a-button>
          </a-col>
          <a-col :span="6">
            <a-button block @click="openAnalytics"> 数据分析 </a-button>
          </a-col>
        </a-row>
        <a-row :gutter="16" style="margin-top: 16px">
          <a-col :span="6">
            <a-button block @click="openOrderManagement"> 订单管理 </a-button>
          </a-col>
          <a-col :span="6">
            <a-button block @click="openTransactionHistory">
              交易记录
            </a-button>
          </a-col>
          <a-col :span="6">
            <a-button block @click="openSellerCenter"> 卖家中心 </a-button>
          </a-col>
          <a-col :span="6">
            <a-button block @click="openSettings"> 系统设置 </a-button>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </div>
</template>

<style lang="less" scoped>
.resource-center {
  padding: 24px;

  .page-header {
    margin-bottom: 24px;

    h1 {
      margin: 0 0 8px 0;
      font-size: 28px;
    }

    p {
      margin: 0;
      color: #666;
    }
  }

  .stat-card {
    text-align: center;
  }
}
</style>
